<template>
  <el-container class="template_container">
    <el-header>
      <h3>请选择报表模板</h3>
    </el-header>

    <el-main class="main_container">
      <el-tabs>
        <el-tab-pane v-for=" type in templates" :key="type.name" :label="type.name">
          <div class="radio_container">
            <el-radio
              v-for="tmp in type.value"
              v-model="selectedTemplate"
              :label="tmp.name"
              border
              :key="tmp.description"
            >{{tmp.description}}</el-radio>
          </div>
        </el-tab-pane>
      </el-tabs>

      <ChartDemo style="flex-grow: 1" :options="selectedOption"></ChartDemo>

      <el-row type="flex" justify="end">
          <el-button type="primary" @click="nextStep"> 下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-row>
   
    </el-main>

  </el-container>
</template>

<script>
import ChartDemo from '@/echarts/demo/ChartDemo.vue';
export default {
  props:["reportInfo"],

    components:{
        ChartDemo
    },
  data() {
    return {
      templates: [],
      selectedTemplate: "",
      selectedOption:''
    };
  },
  mounted() {
    this.loadTemplates();
  },
  methods: {

    nextStep(){

      if(this.selectedTemplate != ''){

        this.$router.push({path:'/querySelect',query:{selectedTemplate:this.selectedTemplate,reportInfo:this.reportInfo}});
      }else{
        this.$notify.error({
            title: "失败",
            message: "请选择一个模板"
          });
      }
    },

    loadTemplates() {
      this.$axios
        .get("/template/getTypeAndTemplateMap")
        .then(d => {
          this.templates = d.data;

        })

        .catch(e => {

          this.$notify.error({
            title: "失败",
            message: "模板列表获取失败"
          });
        });
    }
  },

  watch:{
      selectedTemplate(nv,ov){
          if(nv != ""){

              for(let index in this.templates){
 

                  for(let tmpIndex in this.templates[index].value){

                      let tmp = this.templates[index].value[tmpIndex];

                      if(tmp.name == nv){

                          this.selectedOption = tmp.demoJs;
                          
                          return;
                      }
                  }
              }

          }
      }
  }
};
</script>

<style scoped>
.template_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.radio_container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.main_container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}
</style>
